<template>
  <div class="home">
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="content" v-if="tab == 'instorage'">
            <div class="buts"> 
              <el-button class="button-style" type="primary" @click="customerToFzml()">
                <span class="el-icon-s-custom icon"></span>服装面料入库
              </el-button>
              <el-button class="button-style" type="primary" @click="customerToFzcp()">
                <span class="el-icon-s-custom icon"></span>服装裁片入库
              </el-button>
              <el-button class="button-style" type="primary" @click="customerToFzfl()">
                <span class="el-icon-s-custom icon"></span>服装辅料入库
              </el-button>
            </div>
            <div class="buts">
              <el-button class="button-style" type="primary" @click="customerToXbml()">
                <span class="el-icon-goods icon"></span>箱包面料入库
              </el-button>
              <el-button class="button-style" type="primary" @click="customerToXbcp()">
                <span class="el-icon-goods icon"></span>箱包裁片入库
              </el-button>
              <el-button class="button-style" type="primary" @click="customerToXbfl()">
                <span class="el-icon-goods icon"></span>箱包辅料入库
              </el-button>
            </div>
            <!-- <div class="buts">
              <el-button class="button-style" type="primary" @click="customerToDzzl()">
                <span class="el-icon-cpu icon"></span>电子主料入库
              </el-button>
              <el-button class="button-style" type="primary" @click="customerToDzyl()">
                <span class="el-icon-cpu icon"></span>电子辅料入库
              </el-button>
            </div> -->
          </div>
          <div class="content" v-else-if="tab == 'tailoring'">
            <Tailoring></Tailoring>
          </div>
          <div class="content" v-else-if="tab == 'outsource'">
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/outsource/outstorage'})"
              ><span class="el-icon-receiving icon"></span>外协片出库</el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/outsource/restorage'})"
              ><span class="el-icon-truck icon"></span>外协片返回</el-button>
            </div>
          </div>
          <div class="content" v-else-if="tab == 'materiel'">
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/materiel/onShelf'})"
              >
                <span class="el-icon-sell icon"></span>上架管理
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/materiel/offShelf'})"
              >
                <span class="el-icon-sold-out icon"></span>下架管理
              </el-button>
            </div>
          </div>
          <div class="content" v-else-if="tab == 'kcSearch'">
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/kcSearch/stock',query:{type:'M100002'}})"
              >
                <span class="el-icon-s-custom icon"></span>服装面料查询
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/kcSearch/stock',query:{type:'F100002'}})"
              >
                <span class="el-icon-s-custom icon"></span>服装辅料查询
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/kcSearch/stock',query:{type:'C100002'}})"
              >
                <span class="el-icon-s-custom icon"></span>服装裁片查询
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/kcSearch/stock',query:{type:'P100002'}})"
              >
                <span class="el-icon-s-custom icon"></span>服装成品查询
              </el-button>
            </div>
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/kcSearch/stock',query:{type:'M100001'}})"
              >
                <span class="el-icon-goods icon"></span>箱包面料查询
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/kcSearch/stock',query:{type:'F100001'}})"
              >
                <span class="el-icon-goods icon"></span>箱包辅料查询
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/kcSearch/stock',query:{type:'C100001'}})"
              >
                <span class="el-icon-goods icon"></span>箱包裁片查询
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/kcSearch/stock',query:{type:'P100001'}})"
              >
                <span class="el-icon-goods icon"></span>箱包成品查询
              </el-button>
            </div>
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/kcSearch/stock',query:{type:'F100003'}})"
              >
                <span class="el-icon-cpu icon"></span>电子原料查询
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/kcSearch/stock',query:{type:'P100003'}})"
              >
                <span class="el-icon-cpu icon"></span>电子成品查询
              </el-button>
            </div>
          </div>
          <div class="content" v-else-if="tab == 'lsSearch'">
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/lsSearch/shelves'})"
              >
                <span class="el-icon-tickets icon"></span>上架下架
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/lsSearch/location'})"
              >
                <span class="el-icon-tickets icon"></span>入库流水
              </el-button>
            </div>
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/lsSearch/distribution'})"
              >
                <span class="el-icon-tickets icon"></span>配送流水
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/lsSearch/delivery'})"
              >
                <span class="el-icon-tickets icon"></span>发货流水
              </el-button>
            </div>
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/lsSearch/order'})"
              >
                <span class="el-icon-tickets icon"></span>订单物料流水
              </el-button>
            </div>
          </div>
          <div class="content" v-else-if="tab == 'djSearch'">
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/djSearch/bill',query:{type:1}})"
              >
                <span class="el-icon-receiving icon"></span>入库单
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/djSearch/bill',query:{type:0}})"
              >
                <span class="el-icon-truck icon"></span>出库单
              </el-button>
            </div>
          </div>
          <div class="content" v-else-if="tab == 'tool'">
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/tool/calc'})"
              >
                <span class="el-icon-s-platform icon"></span>点料
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/tool/validity'})"
              >
                <span class="el-icon-s-operation icon"></span>校称
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/tool/calcTrans'})"
              >
                <span class="el-icon-sort icon"></span>重量长度计算
              </el-button>
              <!-- <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/tool/check'})"
              >
                <span class="el-icon-finished icon"></span>账实核对
              </el-button> -->
            </div>
            <div class="buts">
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/tool/storage'})"
              >
                <span class="el-icon-document icon"></span>库位打印
              </el-button>
              <el-button
                class="button-style"
                type="primary"
                @click="$router.push({path:'/tool/stacker'})"
              >
                <span class="el-icon-film icon"></span>垛架打印
              </el-button>
            </div>
          </div>
          <div v-else-if="tab == 'lcheck'">
            <PrisonIndex></PrisonIndex>
          </div>
          <div class="content" v-else>
            <div class="h-title">欢迎进入智慧总仓</div>
            <!-- <el-input type="text" v-model="temp" style="width:300px;height:200px"></el-input> -->
          </div>
        </el-col>
        <el-col :span="24" v-if="routerList.length > 1">
          <div class="buttons">
            <div class="but" v-for="(item,index) in routerList" :key="index" :class="$route.query.tab == item.name ? 'active' : ''">
              <el-button class="button-style" :class="item.icon" type="primary" @click="$router.push({path:'/',query:{tab:item.name}})"></el-button>
              <span>{{item.meta ? item.meta.title : '智慧总仓'}}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="dialogVisible" class="menuModalBox">
      <dialogchangj :instoreType="params.instoreType" :instoreurl="params.instoreurl"></dialogchangj>
    </div>
  </div>
</template>  
<script>
import { mapState } from 'vuex'
import dialogchangj from '@/components/dialogchangj' // 厂家弹出框
import {getTailoringTaskList, getAuth} from '@/api/common' // 接口
import Tailoring from '@/view/tailoring/index' // 模块
import PrisonIndex from '@/view/prison/index'

export default {
  name: 'home',
  data () {
    return {
      tab: 'instorage',
      dialogVisible: false,
      taskList: [],
      count: 0,
      setInterval: null,
      auth: [],
      temp: ''
    }
  },
  // mixins:[Mixin],
  computed: {
    ...mapState({
      orderItem: (state) => state.dialogchangj.orderItem
    }),
    // 通过计算属性设置路由
    routerList () {
      let vm = this
      let routerList = []
      routerList = vm.$router.options.routes.filter((item) => {
        return vm.auth.some((i) => {
          if (item.name === i.modulID) {
            item.meta.title = i.modulName
            // 可拓展到children
            return i
          }
        })
      })
      return routerList
    }
  },
  components: {
    dialogchangj, // 引入组件头部导航
    Tailoring,
    PrisonIndex
  },
  watch: {
    $route (to, from) {
      this.tab = to.query.tab || 0
    },
    $router (val) {
    //   console.log(val.options.routes)
      this.routerList = val.options.routes
    }
  },
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    customerToFzml () {
      let vm = this
      vm.params = {
        instoreType: 'M100002',
        instoreurl: '/instorage/fzml'
      }
      vm.dialogVisible = true
    },
    customerToXbml () {
      let vm = this
      vm.params = {
        instoreType: 'M100001',
        instoreurl: '/instorage/fzml'
      }
      vm.dialogVisible = true
    },
    customerToFzcp () {
      let vm = this
      vm.params = {
        instoreType: 'C100002',
        instoreurl: '/instorage/fzcp'
      }
      vm.dialogVisible = true
    },
    customerToXbcp () {
      let vm = this
      vm.params = {
        instoreType: 'C100001',
        instoreurl: '/instorage/fzcp'
      }
      vm.dialogVisible = true
    },
    customerToFzfl () {
      let vm = this
      vm.params = {
        instoreType: 'F100002',
        instoreurl: '/instorage/fzfl'
      }
      vm.dialogVisible = true
    },
    customerToXbfl () {
      let vm = this
      vm.params = {
        instoreType: 'F100001',
        instoreurl: '/instorage/fzfl'
      }
      vm.dialogVisible = true
    },
    customerToDzzl () {
      let vm = this
      vm.params = {
        instoreType: 'M100003',
        instoreurl: '/instorage/dzzl'
      }
      vm.dialogVisible = true
    },
    customerToDzyl () {
      let vm = this
      vm.params = {
        instoreType: 'F100003',
        instoreurl: '/instorage/dzfl'
      }
      vm.dialogVisible = true
    },
    getWindowClose: function () {
      let vm = this
      vm.dialogVisible = false
    },
    // 任务单-根据不同裁裁剪任务列表
    getTailoringTaskList () {
      let vm = this
      let params = new FormData()
      params.append(
        'CuttingBedFlnkID',
        vm.getLocalStorage('ProductLineFlnkID')
      )
      getTailoringTaskList(params).then((response) => {
        if (response.data.result) {
          vm.taskList = response.data.data
        }
      })
    },
    receiveAndroid (arr) {
      let vm = this
      if (arr && Object.keys(arr).length > 0) {
        Object.keys(arr).map((item, index) => {
          vm.setLocalStorage(item, arr[item])
        })
        vm.$message('传值成功')
      }
    },
    androidPrint () {
      let vm = this
      if (vm.isAndroid()) {
        window.android.print('M', 'string')
      } else {
        vm.$message('不是安卓环境')
      }
    },
    androidSpeak () {
      let vm = this
      if (vm.isAndroid()) {
        window.android.speak('大哥牛逼', 3)
      } else {
        vm.$message('不是安卓环境')
      }
    },
    androidRecognitionFace () {
      let vm = this
      if (vm.isAndroid()) {
        window.android.recognitionFace()
      } else {
        vm.$message('不是安卓环境')
      }
    },
    // 获取权限
    getAuth () {
      let vm = this
      let params = new FormData()
      params.append('ScreenFlnkID', vm.getLocalStorage('ScreenFlnkID'))
      getAuth(params).then((response) => {
        if (response.data.result) {
          vm.auth = response.data.data
        }
      })
    }
  },
  created () {
    this.getAuth()
  },
  mounted () {
    let vm = this
    vm.tab = vm.$route.query.tab || ''
    // 将要给原生调用的方法挂载到 window 上面
    window.receiveAndroid = vm.receiveAndroid
    vm.getTailoringTaskList()
    clearInterval(vm.setInterval)
    vm.setInterval = setInterval(() => {
      vm.getTailoringTaskList()
    }, 5000)
    vm.receiveAndroid()
  },
  beforeDestroy: function () {
    let vm = this
    clearInterval(vm.setInterval)
    vm.setInterval = null
  }
}
</script>

<style lang="scss" scoped>
@import "../css/home.scss";
</style>

